import { Input, Space } from 'antd';
import React, { Component } from 'react';
import '../../../assets/css/tongxunlu/Congaojiss.css'
import '../../../assets/css/tongxunlu/Shurukuang.css'
import getdataMobox from "../Mobox/tongxunldata"

const { Search } = Input;
// 搜索框
const onSearch = (value) => {
    // console.log(value)
    getdataMobox.updatedlist2(value)
};
const myvaluearr = {
    user_name: '',
    sex: '',
    phone_number: '',
    start_time: '',
    department: '',
    resignation_status: '',
}
const getvalue = (e) => {
    console.log(e.target.name + e.target.value);
    myvaluearr[e.target.name] = e.target.value;
}
// 高级搜索
const Fasqq = () => {
    getdataMobox.updatedlist(myvaluearr.user_name, myvaluearr.phone_number, myvaluearr.sex, myvaluearr.department, myvaluearr.start_time, myvaluearr.resignation_status,) 
    
}
class Congaojiss extends Component {

    constructor(props) {
        super(props);
        this.state = {
            display: true,
            myformlistarr:
            {
                name: '',
                sex: '',
                pheon: '',
                birthday: '',
                department: '',
                departure: ''
            }
        };
        this.showbox = this.showbox.bind(this)
    }
    // 发起洗清秋
    // 高级搜索点击显示影藏
    showbox() {
        console.log('点击了');
        if (this.state.display) {
            this.setState({
                display: false
            })
        } else {
            this.setState({
                display: true
            })
        }
    }
    render() {
        return (
            <>
                <div className='conbox'>
                    <Space direction="vertical" className='ssk'>
                        <Search placeholder="input search text" onSearch={onSearch} enterButton />
                    </Space>
                    <button className='conbox-button' onClick={this.showbox}>高级搜索</button>
                </div>
                <div >
                    <form defaultValue={this.state.myformlistarr} className={this.state.display ? "showbox2" : "showbox"}>
                        <div className='shurukuangbox'>
                            <div>
                                {/* 输入盒子 */}
                                <div className='srkbox'>
                                    {/* 上盒子 */}
                                    <div className='shangbox'>
                                        <span>姓名：</span>
                                        <input type='text' name='user_name' onChange={getvalue}></input>
                                        <span className='sexbox'>性别：</span>
                                        <select onChange={getvalue} name='sex' className='sexinp'>
                                            <option name='0'>请选择</option>
                                            <option name='男'>男</option>
                                            <option name='女'>女</option>
                                        </select>
                                        <span className='phonebox'>电话：</span>
                                        <input type='text' name='phone_number' onChange={getvalue}></input>
                                    </div>
                                    {/* 下盒子 */}
                                    <div className='xiabox'>
                                        <span >生日：</span>
                                        <input type='date' name='start_time' onChange={getvalue}></input>
                                        <span className='depbox'>部门：</span>
                                        <select onChange={getvalue} name='department'>
                                            <option name='0'>请选择</option>
                                            <option name='总经办'>总经办</option>
                                            <option name='财务部'>财务部</option>
                                            <option name='业务一部'>业务一部</option>
                                            <option name='业务二部'>业务二部</option>
                                            <option name='渠道招商部'>渠道招商部</option>
                                            <option name='营销部'>营销部</option>
                                            <option name='采购部'>采购部</option>
                                            <option name='客服部'>客服部</option>

                                        </select>
                                        <span className='resbox'>状态：</span>
                                        <select onChange={getvalue} name='resignation_status'>
                                            <option name='0'>请选择</option>
                                            <option name='在职'>在职</option>
                                            <option name='离职'>离职</option>
                                        </select>
                                    </div>
                                    {/* 按钮 */}
                                    <div className='boxbbtt'>
                                        <span className='btn12' onClick={Fasqq}>确定</span>
                                        <span className='btn13'>清除</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </>
        );
    }
}

export default Congaojiss;